<template>
  <div class="container w-75">
    <h3 class="text-center">老师基本信息</h3><br>
    <div class="flex flex-wrap gap-4">
      <el-card style="width: 480px" @click="updateInfo('teacher_name','姓名')" shadow="never">姓名：{{ teacher.teacher_name }}</el-card>
      <el-card style="width: 480px" @click="updateInfo('teacher_sex','性别')" shadow="never">性别：{{ teacher.teacher_sex }}</el-card>
      <el-card style="width: 480px" @click="updateInfo('college','学院')" shadow="never">学院：{{ teacher.college }}</el-card>
      <el-card style="width: 480px" @click="updateInfo('department','系别')" shadow="never">系别：{{ teacher.department}}</el-card>
      <el-card style="width: 480px" @click="updateInfo('courses','所授课程')" shadow="never">所授课程:{{ teacher.courses }}</el-card>
      <el-card style="width: 480px" @click="updateInfo('research_exper','科研经历')" shadow="never">科研经历：{{ teacher.research_exper }}</el-card>
      <el-card style="width: 480px" @click="updateInfo('phone','电话')" shadow="never">电话:{{ teacher.phone }}</el-card>
    </div>
    </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { reactive} from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'

//获取学生的ID
let route=useRoute()
let teacher_id=route.query.teacher_id

//给后端发送请求获取学生的信息
async function getStuInfo(){
if(teacher_id){
     let result=await axios({
      method:'get',
      url:"http://localhost:8080/getTeacherByID",
      params:{
        teacher_id:teacher_id
      }
    })
    return result.data
}
}
let teacher=reactive(await getStuInfo())
//发送请求修改个人信息
async function sendupdateInfo(item,value){
let result=await axios({
  method:"get",
  url:"http://localhost:8080/updateTeaInfo",
  params:{
    teacher_id:teacher_id,
    item:item,
    value:value
  }
})
return result.data
}

//修改个人信息
function updateInfo(updateItem,itemName){
console.log(updateItem)
ElMessageBox.prompt(itemName+'修改为：', 'Tip', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
})
  .then(async({ value }) => {
    console.log(value)
    if(sendupdateInfo(updateItem,value)){
      teacher[updateItem]=value
      ElMessage({
      type: 'success',
      message:"修改成功",
    })
    }
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '取消修改',
    })
  })
}

</script>

<style scoped>


</style>